<template>
  <div class="video_list" id="swiperImages">
    <div class="video_ls clear" ref="videoLs">
      <!-- <swiper class="swiper" v-show="!isShow">
				<swiper-slide  v-for="(item,index) in this.imgs" :key="index">
					<img
						:src="item.url"
						class="swiperImg"
					/>
				</swiper-slide>
      </swiper>-->
      <van-swipe
        class="my-swipe"
        indicator-color="white"
        v-show="!isShow"
        @change="onChange"
        :loop="false"
        :initial-swipe="initial"
        :show-indicators="false"
        ref="swipeTo"
      >
        <van-swipe-item v-if=" this.playerOptions.sources[1]">
          <div class="player">
            <video-player
              class="vjs-custom-skin vjs-big-play-centered swip"
              ref="videoPlayer"
              :options="playerOptions"
              :playsinline="true"
              @play="onPlayerPlay($event)"
              @ended="onPlayerEnded($event)"
              @loadeddata="onPlayerLoadeddata($event)"
              @waiting="onPlayerWaiting($event)"
              @playing="onPlayerPlaying($event)"
              @timeupdate="onPlayerTimeupdate($event)"
              @canplay="onPlayerCanplay($event)"
              @canplaythrough="onPlayerCanplaythrough($event)"
              @ready="playerReadied"
              @statechanged="playerStateChanged($event)"
            ></video-player>
          </div>
        </van-swipe-item>

        <van-swipe-item v-for="(item,index) in imagss" :key="index">
          <div class="swip_imag">
            <!-- <img :src="item.url" class="swiperImg" style="object-fit:cover" /> -->
            <van-image fit="cover" :src="item" class="swiperImg" width="100%"  @click="getImg(index)" >
              <template v-slot:loading>
                <img src="@/assets/images/goodsDetails/serpeImg.png" alt="">
              </template>
            </van-image>
          </div>
        </van-swipe-item>

        <!-- 自定义指示器 -->
        <template #indicator v-if="this.current>=0">
          <div class="custom-indicator">
            <span>{{ current +1}}/{{imgs.length}}</span>
          </div>
        </template>
      </van-swipe>
      <div class="video" v-show="!isShow" v-if=" this.playerOptions.sources[1]&&this.current>=0">
        <swiper :options="swiperOption" ref="mySwiper" class="video_icon">
          <img src="../../assets/images/goodsDetails/视频.png" alt />
          <span>视频</span>
        </swiper>
      </div>
      <!--以下看需要添加-->
      <!-- 视频播放   @pause.stop="onPlayerPause($event)"-->
      <!-- <div class="player" v-show="isShow">
        <video-player
        style="height:375px"
          class="vjs-custom-skin  vjs-big-play-centered"
          ref="videoPlayer"
          :options="playerOptions"
          :playsinline="true"
          @play="onPlayerPlay($event)"
          @ended="onPlayerEnded($event)"
          @loadeddata="onPlayerLoadeddata($event)"
          @waiting="onPlayerWaiting($event)"
          @playing="onPlayerPlaying($event)"
          @timeupdate="onPlayerTimeupdate($event)"
          @canplay="onPlayerCanplay($event)"
          @canplaythrough="onPlayerCanplaythrough($event)"
          @ready="playerReadied"
          @statechanged="playerStateChanged($event)"
        ></video-player>
      </div>-->
    </div>
  </div>
</template>

<script>
import {
  ImagePreview
} from "vant";
import "../../utils/previewImage";
//  import "vue-video-player/src/custom-theme.css";
export default {

  props: {
    mediaS: Array,
    loading: Boolean
  },

  data() {
    return {
      initial: "", //轮播初始索引值
      current: 0,
      meidas: [], //媒体数据
      isShow: false,
      playerOptions: {
        // height: "360",
        // autoplay: true,
        muted: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        aspectRatio: "16:9",
        language: "zh-CN",
        fluid: true,
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        sources: [
          {
            type: "video/mp4"
            // src: "http://guangguang.kuaifaka.com//goods/video/20200424/125736_c77d6f107e74d4252e27c0ed62c526cd_0_0_1542372.mp4"
          }
        ]
        // poster:	// "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
      },
      num: 0, //轮播图当前图片下标
      startX: 0, //手指滑动起始位置
      endX: 0, //手指滑动终点
      sum_num: 0, //轮播图片总数
      has_video: false, //是否有视频
      not_video: true, //是否是图片
      now_index: 1, //当前下标  轮播
      imgs_length: 1, //所有图片长度;
      imgs: [
        // {url:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588137903245&di=c3ff993e15db8a4b187035b061667e01&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg'}
      ], // 图片数组
      winw: 0,
      winh: 0,
      swiperOption: {
        notNextTick: true,
        pagination: ".swiper-pagination",
        slidesPerView: "auto",
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
        on: {
          click: () => {
            this.$refs.swipeTo.swipeTo(0);
            this.$refs.videoPlayer.player.play();
            // this.play(true);
          }
        }
      },
      imagss:[], //图片地址数组
      loadingImage: ['../../assets/goodsDetails/serpeImg.png']
    };
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
    playsinline() {
      var ua = navigator.userAgent.toLocaleLowerCase();
      //x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        return false;
      } else {
        //ios端
        return true;
      }
    }
  },
  created() {
    // if (this.mediaS === null) return;
    this.mediaS.forEach(item => {
      if (item.url.indexOf("?") != -1) {
        item.url = item.url.split("?")[0];
        if (item.media_type === 1) {
          this.imgs.push(item);
          this.imagss.push(item.url)
        } else if (item.media_type === 2) {
          // 说明是视频数据
          this.playerOptions.sources.push(item.url);
          // this.playerOptions.sources[0].src=item.url;
        }
      }
    });
    if (this.playerOptions.sources[1]) {
      this.initial = 1;
    } else {
      this.initial = 0;
    }
  },
  methods: {


    getImg(i) {
      ImagePreview({
        images:this.imagss,
        showIndex: true,
        loop: true,
        startPosition: i
      });
    },
    onChange(index) {
      if (this.playerOptions.sources[1]) {
        this.current = index - 1;
        this.$refs.videoPlayer.player.play();
      } else {
        this.current = index;
      }
      if (index === 0) {
        this.$refs.videoPlayer.player.play();
      } else {
        this.$refs.videoPlayer.player.pause()
      }
    },
    play(bool) {
      this.isShow = bool;
    },
    // 播放视频
    onPlayerPlay(player) {},
    onPlayerPause(player) {
      //暂停播放 停止轮播
      this.play(false);
      // console.log("暂停");
      this.$refs.videoPlayer.player.pause(); // 暂停
    },
    onPlayerEnded(player) {
      //播放完毕 开始轮播
      this.play(false);
      // console.log("播放完毕");
    },
    onPlayerLoadeddata(player) {},
    onPlayerWaiting(player) {},
    onPlayerPlaying(player) {},
    onPlayerTimeupdate(player) {},
    onPlayerCanplay(player) {
      // console.log(player)
    },
    onPlayerCanplaythrough(player) {},
    playerStateChanged(playerCurrentState) {},
    playerReadied(player) {},
    touchStart(e) {
      //手指滑动初始位置
      e.preventDefault(); // 阻止默认事件，滚动等
      this.startX = e.touches[0].clientX;
    },
    touchMove(e) {
      //手指滑动中
      e.preventDefault();
      this.touchEnd();
    },
    playVideo() {
      this.num = 0;
      this.$refs.videoLs.style.left = -this.num * 10 + "rem";
      this.$refs.videoLs.style.transition = "0.3s";
      this.now_index = 0;
      this.not_video = false;
      this.$refs.vjs_video_h[0].player.play();
    }
  }
};
</script>
<style lang="scss">
.video-js {
  height: 100% !important;
  width: 100% !important;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
  height: 375px;
  // background: url('../../assets/images/goodsDetails/serpeImg.png') no-repeat;
  // background-size: 100% 100%;
  .swip_imag {
    .swiperImg {
      width: 100%!important;
      height: 375px !important;
    }
  }
}
.custom-indicator {
  position: absolute;
  border-radius: 10px;
  // width: 35px;
  text-align: center;
  right: 15px;
  bottom: 20px;
  padding: 2px 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.26);
  font-size: 11px;
  span {
    color: rgba(255, 255, 255, 1);
  }
}

.video {
  // display: inline-block;
  height: 23px;
  width: 70px;
  background: rgba(255, 255, 255, 1);
  border-radius: 15px;
  opacity: 0.77;
  color: #1e1e1e;
  font-size: 11px;
  position: absolute;
  bottom: 17px;
  z-index: 100;
  left: 50%;
  transform: translate(-50%);

  .swiper-wrapper {
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  img {
    height: 19px;
    width: 19px ;
    margin-left: 2px;
  }
  span {
    margin-right: 0.426667rem /* 32/75 */;
  }
}
</style>
<style lang="scss" scoped>
#swiperImages {
  //   touch-action: none;
  .swiper-container {
    width: 100%;
    height: 100%;
    .swiperImg {
      width: 100%;
      display: block;
      height: 375px !important;
    }
    .swiper-container {
      z-index: 0;
    }
  }
}
.clear {
  *zoom: 1;
  position: relative;
}
.clear:after {
  visibility: hidden;
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.swiper {
  width: 240px;
  position: relative;
  z-index: 50;
  .swiperImg {
    width: 100%;
    height: 373px;
    display: block;
  }
}
.swip {
  height: 375px;
}
</style>
